<template>
  <div class="main-header">
    <div class="main-header__top" :style="{ backgroundColor: backgroundColor }">
      <div class="content">
        <router-link to="/index" class="logo">
          <img :src="systemLogoUrl" alt="" class="logo__img" />
          <span class="logo__text">病理学线上教学系统</span>
        </router-link>

        <div class="user">
          <template v-if="getAuthorization">
            <!--用户头像与用户名-->
            <div class="user-containers">


              <el-tooltip effect="light" placement="bottom-end" trigger="hover">
                <div slot="content" style="text-align: center">
                  <el-button size="mini" type="text" @click="updatePersonInfo">个人信息</el-button>
                  <hr align="center" width="50" color="#987cb9" SIZE="1" />
                  <el-button size="mini" type="text" @click="updatePassword">修改密码</el-button>
                </div>
                <div class="reference display_flex_center">
                  <div class="head-img" v-if="userHeadImgUrl">
                    <img :src="userHeadImgUrl" class="header-user-headimg" alt="" />
                  </div>
                  <div class="user__btn">{{ getUser.name }}</div>

                </div>
              </el-tooltip>
              <!--登出图标-->

              <div class="user__btn" @click="logoutConfirm">
                <font-awesome-icon :icon="['fas', 'sign-out-alt']" class="awesome">
                </font-awesome-icon>
              </div>
            </div>
            <!-- <div class="user__btn" @click="logoutConfirm">退出</div> -->
          </template>
          <el-popover placement="bottom" trigger="hover" popper-class="concatUs-popper" v-else>

            <router-link to="/login" class="user__btn" slot="reference">用户登录</router-link>
          </el-popover>

        </div>
      </div>
    </div>
    <div class="main-header__content" v-if="$slots.default">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { mapState } from 'vuex'
export default {
  props: {
    backgroundColor: {
      type: String,
      default: 'rgba(255,255,255,1)'
    },
    color: {
      type: String,
      default: '#fff'
    },
    showFixed: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      systemLogoUrl: ''
    }
  },
  computed: {
    ...mapGetters(['getAuthorization', 'getUser']),
    ...mapState({
      indexManageInfo: state => state.indexManageInfo
    }),
    // 用户头像图片链接
    userHeadImgUrl() {
      if (this.$store.state.user.headImgUrl) {
        return (
          process.env.VUE_APP_ImageServiceURL +
          this.$store.state.user.headImgUrl
        );
      } else {
        return '../images/doctor.png';
      }

    },
  },
  mounted() {
    this.getPlatform()
  },
  methods: {
    updatePersonInfo() {

    },
    updatePassword() {

    },

    toPathologyReadMeeting() {
      window.open('http://www.aikeji.top:3000/', '_blank')
    },
    async getPlatform() {
      await this.$axios({
        // 详见 axios 请求配置项
        method: 'GET',
        url: '/institutions/platform',
        headers: {
          authorization: this.$store.getters.getAuthorization
        }
      }).then(res => {
        // 请求失败
        if (res.data.code !== 200) {
          throw new Error(res.data)
        }
        // 请求成功
        const result = res.data.data
        this.systemLogoUrl = 'http://www.aikeji.top:50005/_uploads/PHOTO/1722578117626.png'//process.env.VUE_APP_ImageServiceURL + result.logoUrl
      })
    },
    // 登出确认
    logoutConfirm() {
      this.$confirm('即将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'PUT',
          url: '/logout',
          headers: {
            authorization: this.$store.getters.getAuthorization
          }
        })

        this.logout()
      })
    },
    // 登出操作
    logout() {
      this.$store.commit('setPropertyGeneral', {
        key: 'authorization',
        value: ''
      })
      this.$store.commit('setUser', { phone: null })
      this.$router.replace('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.main-header {
  z-index: 500;
  position: relative;
  height: 70px;

  &__top {
    z-index: 500;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 139, 95, 0.6);

    .content {
      margin: 0 auto;
      overflow: hidden;
      padding:0 10px;
    }
  }

  &__content {
    height: 450px;
  }
}

.logo {
  height: 70px;
  line-height: 70px;
  float: left;
  font-size: 0;

  &__img {
    height:60px;
    max-width:200px;
    vertical-align: middle;
    border-radius:4px;
  }

  &__text {
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    color: #2C2B2B;
    line-height: 50px;
    margin-left: 20px;
    vertical-align: middle;
  }
}

.user {
  font-size: 0;
  float: right;
  height: 70px;

  &__btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: #2C2B2B;
    line-height: 70px;
    vertical-align: middle;
    text-decoration: none;
    padding: 0 10px;
    cursor: pointer;



    &:hover {
      background-color: transparent;
    }
  }

}

.user-containers {
  display: flex;
  align-items: center;
  color: #2C2B2B;
}
</style>
<style lang="scss">
.concatUs-popper {
  padding: 0;

  .concatUs-img {
    width: 300px;
    vertical-align: middle;
  }
}
</style>
